position: fixed

Layout Viewportに対して相対的に配置する時に使う

position: fixedを指定した要素は高さがなくなる

fixed指定前

https://gyazo.com/c54d48fec2b88bfdd9216426ca00c3f0

fixed指定後

code:css

header {

position: fixed;

top: 0px;

}

https://gyazo.com/79afe2ecd419306a4186d7dc51211d05

後ろに被っているのがわかるmrsekut.icon

paddingなりmarginなりでこの被りを消す必要がある

code:css

main {

margin-top: 24px; /* headerの高さ分のmarginを取る */

}

https://gyazo.com/7c0a4bb7f67b580d350a45a279b62445 https://codepen.io/mrsekut/pen/OJwgeme

そのためには「headerの高さがいくらか？」というのを知らないといけない

親が指定するならまだしも、兄弟の要素の高さを知らないといけないのはおかしいmrsekut.icon

そもそもposition: fixedを使わない